<template>
  <el-form-item :label="$t(label)" :prop="prop">
    <el-input
      v-model="inputValue"
      class="filter-item"
      :placeholder="placeholder"
      :clearable="clearable"
      :input-limit="inputLimit"
      :readonly="readonly"
      :disabled="disabled"
      :type="type"
      @input.native="updateValue"
      @click.native="onClick"
      @clear="clear"
    />
  </el-form-item>
</template>

<script>
export default {
  name: 'InputForm',
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String
    },
    clearable: {
      type: Boolean,
      default: true
    },
    inputLimit: {
      type: Boolean,
      default: false
    },
    readonly: { // 是否只读 默认false
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(val) {
      this.inputValue = val
    }
  },
  methods: {
    updateValue(event) {
      if (this.inputLimit) {
        event.target.value = event.target.value.replace(/([\u4e00-\u9fa5])|(\s)|[^\d\w]/g, '')
      }
      this.$emit('input', event.target.value)
    },
    onClick() {
      this.$emit('onClick', this.prop)
    },
    clear() {
      this.$emit('input', undefined)
    }
  }
}
</script>

<style scoped>

</style>
